<template>
  <div class="archive left">
    <el-timeline>
        <el-timeline-item v-for="(item, index) in articlesList"
                          :key="index"
                          :color="index%2 === 0 ? 'blue' : index%2 === 1 ? 'green' : ''"
                          placement="top"
                          hide-timestamp>
          <router-link :to="`/articleDetail?id=${item._id}`"
                       target="_blank">
            <h3 class="title" >{{item.title}}</h3>
          </router-link>
          <p>   {{ item.ctime | formateDate("YMDHMS") }}</p>
        </el-timeline-item>
    </el-timeline>
      <Loading v-if="isLoading"/>
      <LoadEnd :msg="msg" v-if="isLoadEnd"></LoadEnd>
  </div>
</template>
<script>
import axios from 'axios'
import Loading from '../components/loading.vue'
import LoadEnd from '../components/loadEnd.vue'
export default {
 data () {
    return {
      articlesList:[],
      tag_id:'',
      tag_name:'',
      pageNum:1,
      pageSize:30,
      isLoadEnd:false,
      isLoading:false,
      msg:''
    }
  },
  mounted () {
    this.handleSearch();
  window.onscroll = () => {
      if (getScrollTop() + getWindowHeight() > getDocumentHeight() - 150) {
        // 如果不是已经没有数据了，都可以继续滚动加载
        if (this.isLoadEnd === false) {
          this.handleSearch();
        }
      }
    };
  },
   components:{
     Loading,
     LoadEnd
  },
  methods:{
        handleSearch(){
       this.isLoading = true;
        axios.post('api/article',{pageNum:this.pageNum,pageSize:this.pageSize})
        .then(data => {
           this.isLoading = false;
           if (data.data.length === 0 ) {
              this.msg='您还没有发表相关项目！'
                this.isLoadEnd = true;
                this.isLoading = false;
                document.removeEventListener("scroll", () => {});
                window.onscroll = null;
                return;
              }else{
                  console.log(data)
                  this.isLoading=false
                  this.articlesList = [...this.articlesList, ...data.data];
                  this.pageNum++;
              }
        })
    }
  }
}
</script>

<style scoped lang="less">
@import url("../less/index.less");
.archive {
  padding: 40px 0;

  .year {
    font-size: 30px;
    font-weight: bold;
    color: #000;
    margin-top: 0;
  }
  a {
    text-decoration: none;
  }

  .title {
    color: #333;
    &:hover {
      color: #1890ff;
    }
  }
}
</style>